<template>
    <el-table :data="state.data" height="900" 
    :default-sort="state.sort"
    @sort-change="sortChange"
    @cell-click="cellClick"
    :cell-class-name="tableCellClassName"
    style="width: 100%">
        <el-table-column prop="date" label="添加日期" sortable width="180"/>
        <el-table-column prop="stock" label="股票" width="150" />
        <el-table-column prop="currentPrice" label="当前价格" width="120"/>
        <el-table-column prop="monitorPrice" label="监控价格" width="120"/>
        <el-table-column prop="disPct" label="disPct" width="80" sortable/>
        <el-table-column prop="type" label="type" width="120"/>
        <el-table-column prop="weight" label="权重" width="80"/>
        <el-table-column prop="description" label="desc"/>
    </el-table>
</template>

<script>
// 个股周数据详情页
import { reactive, watch } from 'vue';
import { getMonitorPriceData, getMonitorStockPriceData } from '../service/monitor';
import ToStockDetail from './ToStockDetail.vue';

export default {
    name: 'WeekStockDetail',
    components: {
        ToStockDetail,
    },

    setup() {

        const baseKey = "MonitorPrice"
        const selectKey = baseKey + "Select"
        const sortPropKey = baseKey + "SortProp"
        const sortOrderKey = baseKey + "SortOrder"

        const state = reactive({
            operationSelected: '',
            rawData: [],
            data: [],
            sort: { 
                prop: sessionStorage.getItem(sortPropKey) || 'date' , 
                order: sessionStorage.getItem(sortOrderKey) || 'descending' 
            }
        })

        getMonitorPriceData().then(res => {
            state.rawData = res.data.reverse().slice(0, 220)
            state.data = state.rawData
        })

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property
            if (columnProperty == "disPct") {
                if (row[columnProperty] < 0) {
                    return 'lt0-cell'
                }
            }
            return ''
        }

        const cellClick = (row, column, cell, event) => {
            var columnProperty = column.property

            if (['stock', 'description'].includes(columnProperty)) {
                let val = row[columnProperty]
                if (state.operationSelected != "" && state.operationSelected == val) {
                    state.operationSelected = ""
                    state.data = state.rawData
                } else {
                    state.operationSelected = val
                    state.data = state.rawData.filter(item => item[columnProperty] == val)
                }
            }
        }

        return {state, tableCellClassName, sortChange,cellClick}
    }
}
</script>